<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!--导航栏-->
    <div class="nav">
        <img id = "logo" src="img/logo.png" alt="">
        <span class="title">我的博客系统</span>
        <!--用于占位-->
        <span class="spacer"></span>
        <!--按钮-->
        <a href="blog_list.html"><img src="img/home.png" alt="">主页</a>
        <a href="blog_edit.html"><img src="img/edit.png" alt="">写博客</a>
        <a href="logout"><img src="img/zhuxiao.png" alt="">注销</a>
     </div>

     <!--页面主体-->
     <div class="container">
        <div class="container-left">
            <div class="user">
                <img src="img/profile_pic.jpg" alt="">
                <h3></h3>
                <a href="#">gitee 地址</a>
                <div class="counter">
                    <a id="articleA">文章</a>
                    <a id="followersA">粉丝</a>
                </div>
                <div class="counter">
                    <span id="blogCount"></span>
                    <span id="followers"></span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <div class="blog-content">
                <!--博客标题-->
                <h3>我的第一篇博客</h3>
                <div class="date">
                    2023-11-30 12:00:00
                </div>
                <div class="article" id="detail">
                    
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-user">
                    <img src="img/profile_pic.jpg" alt="">
                    <span id="name"></span>
                    <div class="interest">
                        <a href="#">关注</a>
                    </div>
                </div>

                <a class="collection" href="#">
                    <img src="img/shoucang.png" alt="">
                    <span>收藏</span>
                </a>

                <a class="remark" href="#">
                    <img src="img/pinglun.png" alt="">
                    <span>评论</span>
                </a>
                
            </div>
        </div>
     </div>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="js/app.js"></script>
     <script>
        function getBlog() {
            $.ajax({
                type:'get',
                url:'blog'+location.search,
                success:function(body) {
                    let title = document.querySelector('.blog-content h3');
                    title.innerHTML = body.title;
                    let date = document.querySelector('.blog-content .date');
                    date.innerHTML = body.postTime;
                    // let article = document.querySelector('.blog-content .article');
                    // article.innerHTML = body.content; 
                    //用editor.md进行渲染 
                    //第一个参数是div的id 第二个参数是一个js对象
                    editormd.markdownToHTML('detail', {
                        markdown : body.content
                    });
                    let remark = document.querySelector('.remark');
                    remark.href = "remark.html?blogId=" + body.blogId;
                    let collection = document.querySelector('.collection');
                    collection.href = "collection?blogId=" + body.blogId;
                }
            })
        }
        getBlog();
        checkLogin();
        function getUserInfo() {
            $.ajax({
                type:'get', 
                url : 'userInfo' + location.search,
                success : function(body) {
                    let h3 = document.querySelector('.user h3');
                    h3.innerHTML = body.username;

                    let username = document.querySelector('#name');
                    username.innerHTML = body.username;

                    if(body.isYourBlog) {
                        //在导航栏中加按钮
                        let deleteA = document.createElement('a');
                        deleteA.href = 'blogDelete' + location.search;
                        deleteA.className = 'deleteA'

                        let bottomDiv = document.querySelector('.bottom');
                        bottomDiv.appendChild(deleteA);

                        let deleteIcon = document.createElement('img');
                        deleteIcon.src='img/shanchu.png';
                        deleteA.appendChild(deleteIcon);

                        let span = document.createElement('span');
                        span.innerHTML='删除';
                        deleteA.appendChild(span);
                    }
                    let giteeA = document.querySelector('.user a');
                    if(body.gitUrl != null) {
                        giteeA.href = body.gitUrl;
                    }
                    //更新博客数
                    let blogCount = document.querySelector('#blogCount');
                    blogCount.innerHTML=body.blogCount;

                    //设置关注的href
                    let interestA = document.querySelector('.interest a');
                    interestA.href = 'following'+location.search+'&followingUserId='+body.userId;

                    //更新粉丝数
                    let followers = document.querySelector('#followers');
                    followers.innerHTML=body.followerCount;

                    //给文章添加跳转链接
                    let articleA = document.querySelector('#articleA');
                    articleA.href = 'user_bloglist.html?userId='+body.userId;

                    let followersA = document.querySelector('#followersA');
                    followersA.href = 'follower_list.html?author=' + body.userId;
                }
            })
        }
        getUserInfo();
     </script>
</body>
</html>